<template>
  <div class="task-detail">
    <!-- 任务头部 -->
    <div class="task-header">
      <div class="header-content">
        <div class="task-info">
          <div class="breadcrumb">
            <el-breadcrumb separator="/">
              <el-breadcrumb-item :to="{ path: '/task' }">学习任务</el-breadcrumb-item>
              <el-breadcrumb-item :to="{ path: '/task/list' }">任务列表</el-breadcrumb-item>
              <el-breadcrumb-item>{{ task.title }}</el-breadcrumb-item>
            </el-breadcrumb>
          </div>
          
          <div class="task-main-info">
            <div class="task-left">
              <h1 class="task-title">{{ task.title }}</h1>
              
              <div class="task-meta">
                <el-tag :type="getTaskTypeColor(task.type)" size="large">
                  {{ getTaskTypeName(task.type) }}
                </el-tag>
                <el-tag :type="getDifficultyColor(task.difficulty)">
                  {{ task.difficulty }}
                </el-tag>
                <div class="task-stats">
                  <span class="stat-item">
                    <el-icon><Clock /></el-icon>
                    {{ task.estimatedTime }}分钟
                  </span>
                  <span class="stat-item">
                    <el-icon><User /></el-icon>
                    {{ task.participants }}人参与
                  </span>
                </div>
              </div>
              
              <div class="task-description">
                {{ task.description }}
              </div>
            </div>
            
            <div class="task-right">
              <div class="task-actions">
                <el-button 
                  type="primary" 
                  size="large" 
                  @click="startTask"
                  :loading="starting"
                >
                  {{ getActionText() }}
                </el-button>
                
                <div class="action-buttons">
                  <el-button @click="toggleFavorite" :type="task.isFavorited ? 'primary' : ''">
                    <el-icon><Star /></el-icon>
                    {{ task.isFavorited ? '已收藏' : '收藏' }}
                  </el-button>
                  <el-button @click="shareTask">
                    <el-icon><Share /></el-icon>
                    分享
                  </el-button>
                </div>
              </div>
              
              <div class="task-progress" v-if="task.progress !== undefined">
                <div class="progress-card">
                  <div class="progress-header">
                    <span>学习进度</span>
                    <span class="progress-percent">{{ task.progress }}%</span>
                  </div>
                  <el-progress 
                    :percentage="task.progress" 
                    :show-text="false"
                    :stroke-width="8"
                  />
                  <div class="progress-desc">
                    {{ task.progress === 100 ? '已完成' : '继续学习' }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 任务内容 -->
    <div class="task-content">
      <div class="content-container">
        <div class="main-content">
          <el-tabs v-model="activeTab" class="task-tabs">
            <!-- 任务介绍 -->
            <el-tab-pane label="任务介绍" name="introduction">
              <div class="introduction-content">
                <section class="task-overview">
                  <h3>任务概述</h3>
                  <div class="overview-text">{{ task.overview }}</div>
                </section>
                
                <section class="learning-objectives">
                  <h3>学习目标</h3>
                  <ul class="objectives-list">
                    <li v-for="objective in task.objectives" :key="objective">
                      {{ objective }}
                    </li>
                  </ul>
                </section>
                
                <section class="task-requirements">
                  <h3>任务要求</h3>
                  <ul class="requirements-list">
                    <li v-for="requirement in task.requirements" :key="requirement">
                      {{ requirement }}
                    </li>
                  </ul>
                </section>
                
                <section class="learning-materials" v-if="task.materials">
                  <h3>学习资料</h3>
                  <div class="materials-list">
                    <div 
                      v-for="material in task.materials" 
                      :key="material.id"
                      class="material-item"
                    >
                      <div class="material-icon">
                        <el-icon v-if="material.type === 'video'"><VideoPlay /></el-icon>
                        <el-icon v-else-if="material.type === 'document'"><Document /></el-icon>
                        <el-icon v-else><Link /></el-icon>
                      </div>
                      <div class="material-content">
                        <div class="material-title">{{ material.title }}</div>
                        <div class="material-desc">{{ material.description }}</div>
                      </div>
                      <div class="material-action">
                        <el-button size="small" @click="viewMaterial(material)">
                          查看
                        </el-button>
                      </div>
                    </div>
                  </div>
                </section>
              </div>
            </el-tab-pane>
            
            <!-- 学习记录 -->
            <el-tab-pane label="学习记录" name="records">
              <div class="records-content">
                <div v-if="learningRecords.length === 0" class="no-records">
                  <EmptyState
                    image="/images/empty-records.svg"
                    title="暂无学习记录"
                    description="开始学习后可以在这里查看记录"
                  />
                </div>
                
                <div v-else class="records-list">
                  <div 
                    v-for="record in learningRecords" 
                    :key="record.id"
                    class="record-item"
                  >
                    <div class="record-header">
                      <div class="record-time">{{ formatDateTime(record.createdAt) }}</div>
                      <div class="record-duration">学习时长：{{ record.duration }}分钟</div>
                    </div>
                    
                    <div class="record-content">
                      <div class="record-progress">
                        <span>进度：{{ record.progress }}%</span>
                        <el-progress 
                          :percentage="record.progress" 
                          :show-text="false"
                          :stroke-width="6"
                        />
                      </div>
                      
                      <div class="record-notes" v-if="record.notes">
                        <div class="notes-title">学习笔记：</div>
                        <div class="notes-content">{{ record.notes }}</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </el-tab-pane>
            
            <!-- 相关任务 -->
            <el-tab-pane label="相关任务" name="related">
              <div class="related-content">
                <div class="related-tasks">
                  <div 
                    v-for="relatedTask in relatedTasks" 
                    :key="relatedTask.id"
                    class="related-task-item"
                    @click="viewTask(relatedTask)"
                  >
                    <div class="task-info">
                      <div class="task-title">{{ relatedTask.title }}</div>
                      <div class="task-meta">
                        <el-tag :type="getTaskTypeColor(relatedTask.type)" size="small">
                          {{ getTaskTypeName(relatedTask.type) }}
                        </el-tag>
                        <span class="task-difficulty">{{ relatedTask.difficulty }}</span>
                        <span class="task-time">{{ relatedTask.estimatedTime }}分钟</span>
                      </div>
                    </div>
                    
                    <div class="task-actions">
                      <el-button size="small" @click.stop="viewTask(relatedTask)">
                        查看详情
                      </el-button>
                    </div>
                  </div>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
        
        <!-- 侧边栏 -->
        <div class="sidebar">
          <!-- 任务统计 -->
          <div class="task-statistics">
            <h3>任务统计</h3>
            <div class="stats-list">
              <div class="stat-item">
                <div class="stat-label">参与人数</div>
                <div class="stat-value">{{ task.participants }}</div>
              </div>
              <div class="stat-item">
                <div class="stat-label">完成率</div>
                <div class="stat-value">{{ task.completionRate }}%</div>
              </div>
              <div class="stat-item">
                <div class="stat-label">平均用时</div>
                <div class="stat-value">{{ task.averageTime }}分钟</div>
              </div>
              <div class="stat-item">
                <div class="stat-label">难度等级</div>
                <div class="stat-value">{{ task.difficulty }}</div>
              </div>
            </div>
          </div>
          
          <!-- 学习建议 -->
          <div class="learning-tips">
            <h3>学习建议</h3>
            <div class="tips-list">
              <div 
                v-for="tip in learningTips" 
                :key="tip.id"
                class="tip-item"
              >
                <div class="tip-icon">
                  <el-icon><Lightbulb /></el-icon>
                </div>
                <div class="tip-content">
                  <div class="tip-title">{{ tip.title }}</div>
                  <div class="tip-desc">{{ tip.description }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { 
  Clock, User, Star, Share, VideoPlay, Document, Link, Lightbulb
} from '@element-plus/icons-vue'
import EmptyState from '@/components/global/EmptyState.vue'
import { ElMessage } from 'element-plus'

const router = useRouter()
const route = useRoute()

// 响应式数据
const activeTab = ref('introduction')
const starting = ref(false)

// 模拟任务数据
const task = ref({
  id: 1,
  title: 'JavaScript基础语法',
  description: '学习JavaScript的基本语法和数据类型，掌握变量、函数、对象等核心概念',
  type: 'video',
  difficulty: '简单',
  estimatedTime: 30,
  participants: 1250,
  completionRate: 85,
  averageTime: 28,
  progress: 75,
  isFavorited: false,
  overview: 'JavaScript是一种高级的、解释型的编程语言，是Web开发的核心技术之一。本任务将带您从零开始学习JavaScript的基础语法，包括变量声明、数据类型、运算符、控制结构等内容。',
  objectives: [
    '理解JavaScript的基本概念和特点',
    '掌握变量声明和数据类型',
    '学会使用运算符和表达式',
    '掌握条件语句和循环语句',
    '了解函数的定义和调用'
  ],
  requirements: [
    '具备基本的计算机操作能力',
    '了解HTML和CSS基础知识',
    '准备好学习环境（浏览器或代码编辑器）',
    '预留充足的学习时间'
  ],
  materials: [
    {
      id: 1,
      type: 'video',
      title: 'JavaScript入门视频教程',
      description: '30分钟快速入门JavaScript基础语法'
    },
    {
      id: 2,
      type: 'document',
      title: 'JavaScript语法参考手册',
      description: '详细的语法说明和示例代码'
    },
    {
      id: 3,
      type: 'link',
      title: '在线练习平台',
      description: '交互式的JavaScript练习环境'
    }
  ]
})

const learningRecords = ref([
  {
    id: 1,
    progress: 75,
    duration: 25,
    notes: '学习了变量声明和基本数据类型，需要多练习',
    createdAt: new Date('2024-01-15 14:30:00')
  },
  {
    id: 2,
    progress: 50,
    duration: 15,
    notes: '完成了运算符部分的学习',
    createdAt: new Date('2024-01-14 16:20:00')
  }
])

const relatedTasks = ref([
  {
    id: 2,
    title: 'JavaScript函数进阶',
    type: 'practice',
    difficulty: '中等',
    estimatedTime: 45
  },
  {
    id: 3,
    title: 'DOM操作基础',
    type: 'project',
    difficulty: '中等',
    estimatedTime: 60
  }
])

const learningTips = ref([
  {
    id: 1,
    title: '多动手练习',
    description: '理论学习后要及时进行代码练习，加深理解'
  },
  {
    id: 2,
    title: '做好笔记',
    description: '记录重要概念和容易出错的地方'
  },
  {
    id: 3,
    title: '循序渐进',
    description: '按照学习路径逐步深入，不要急于求成'
  }
])

// 计算属性
const getActionText = () => {
  if (task.value.progress === 100) return '重新学习'
  if (task.value.progress > 0) return '继续学习'
  return '开始学习'
}

// 方法
const getTaskTypeColor = (type) => {
  const colors = {
    'video': 'primary',
    'practice': 'success',
    'project': 'warning',
    'theory': 'info'
  }
  return colors[type] || 'default'
}

const getTaskTypeName = (type) => {
  const names = {
    'video': '视频学习',
    'practice': '实践练习',
    'project': '项目实战',
    'theory': '理论学习'
  }
  return names[type] || '未知'
}

const getDifficultyColor = (difficulty) => {
  const colors = {
    '简单': 'success',
    '中等': 'warning',
    '困难': 'danger'
  }
  return colors[difficulty] || 'info'
}

const formatDateTime = (date) => {
  return new Date(date).toLocaleString('zh-CN')
}

const startTask = async () => {
  starting.value = true
  try {
    // 模拟API调用
    await new Promise(resolve => setTimeout(resolve, 1000))
    
    router.push(`/task/learn/${task.value.id}`)
  } catch (error) {
    ElMessage.error('启动任务失败，请重试')
  } finally {
    starting.value = false
  }
}

const toggleFavorite = () => {
  task.value.isFavorited = !task.value.isFavorited
  ElMessage.success(task.value.isFavorited ? '已收藏' : '已取消收藏')
}

const shareTask = () => {
  ElMessage.success('分享链接已复制到剪贴板')
}

const viewMaterial = (material) => {
  ElMessage.info(`查看学习资料：${material.title}`)
}

const viewTask = (relatedTask) => {
  router.push(`/task/detail/${relatedTask.id}`)
}

onMounted(() => {
  // 根据路由参数加载任务数据
  const taskId = route.params.id
  if (taskId) {
    // 加载任务详情数据
  }
})
</script>

<style lang="scss" scoped>
.task-detail {
  min-height: 100vh;
  background: var(--el-bg-color-page);
}

.task-header {
  background: white;
  border-bottom: 1px solid var(--el-border-color-extra-light);
  padding: 20px 0 40px;
}

.header-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.breadcrumb {
  margin-bottom: 20px;
}

.task-main-info {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 40px;
  
  @media (max-width: 1024px) {
    grid-template-columns: 1fr;
    gap: 30px;
  }
}

.task-title {
  font-size: 28px;
  font-weight: 700;
  color: var(--el-text-color-primary);
  margin-bottom: 16px;
  line-height: 1.2;
}

.task-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.task-stats {
  display: flex;
  gap: 16px;
  
  .stat-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    color: var(--el-text-color-secondary);
    
    .el-icon {
      color: var(--el-color-primary);
    }
  }
}

.task-description {
  font-size: 16px;
  color: var(--el-text-color-regular);
  line-height: 1.6;
}

.task-actions {
  margin-bottom: 20px;
  
  .el-button {
    width: 100%;
    margin-bottom: 12px;
  }
  
  .action-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    
    .el-button {
      margin-bottom: 0;
    }
  }
}

.task-progress {
  .progress-card {
    padding: 16px;
    background: var(--el-fill-color-extra-light);
    border-radius: 8px;
    
    .progress-header {
      display: flex;
      justify-content: space-between;
      margin-bottom: 8px;
      font-weight: 500;
      color: var(--el-text-color-primary);
    }
    
    .progress-desc {
      text-align: center;
      margin-top: 8px;
      font-size: 12px;
      color: var(--el-text-color-secondary);
    }
  }
}

.task-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
}

.content-container {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 40px;
  
  @media (max-width: 1024px) {
    grid-template-columns: 1fr;
  }
}

.task-tabs {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

.introduction-content {
  section {
    margin-bottom: 32px;
    
    h3 {
      font-size: 18px;
      font-weight: 600;
      margin-bottom: 16px;
      color: var(--el-text-color-primary);
    }
  }
}

.overview-text {
  line-height: 1.6;
  color: var(--el-text-color-regular);
}

.objectives-list,
.requirements-list {
  list-style: none;
  padding: 0;
  
  li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 8px;
    color: var(--el-text-color-regular);
    
    &::before {
      content: '•';
      position: absolute;
      left: 0;
      color: var(--el-color-primary);
      font-weight: bold;
    }
  }
}

.materials-list {
  .material-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--el-border-color-lighter);
    border-radius: 8px;
    margin-bottom: 12px;
    
    .material-icon {
      width: 40px;
      height: 40px;
      border-radius: 8px;
      background: var(--el-color-primary-light-9);
      color: var(--el-color-primary);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
    }
    
    .material-content {
      flex: 1;
      
      .material-title {
        font-weight: 500;
        margin-bottom: 4px;
        color: var(--el-text-color-primary);
      }
      
      .material-desc {
        font-size: 14px;
        color: var(--el-text-color-secondary);
      }
    }
  }
}

.records-content {
  .no-records {
    text-align: center;
    padding: 40px 20px;
  }
  
  .records-list {
    .record-item {
      border: 1px solid var(--el-border-color-lighter);
      border-radius: 8px;
      padding: 16px;
      margin-bottom: 16px;
      
      .record-header {
        display: flex;
        justify-content: space-between;
        margin-bottom: 12px;
        
        .record-time {
          font-weight: 500;
          color: var(--el-text-color-primary);
        }
        
        .record-duration {
          font-size: 14px;
          color: var(--el-text-color-secondary);
        }
      }
      
      .record-progress {
        margin-bottom: 12px;
        
        span {
          display: block;
          margin-bottom: 8px;
          font-size: 14px;
          color: var(--el-text-color-secondary);
        }
      }
      
      .record-notes {
        .notes-title {
          font-weight: 500;
          margin-bottom: 4px;
          color: var(--el-text-color-primary);
        }
        
        .notes-content {
          font-size: 14px;
          color: var(--el-text-color-secondary);
          line-height: 1.5;
        }
      }
    }
  }
}

.related-content {
  .related-task-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    border: 1px solid var(--el-border-color-lighter);
    border-radius: 8px;
    margin-bottom: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    
    &:hover {
      border-color: var(--el-color-primary);
      background: var(--el-fill-color-extra-light);
    }
    
    .task-info {
      flex: 1;
      
      .task-title {
        font-weight: 500;
        margin-bottom: 8px;
        color: var(--el-text-color-primary);
      }
      
      .task-meta {
        display: flex;
        gap: 12px;
        align-items: center;
        
        .task-difficulty,
        .task-time {
          font-size: 12px;
          color: var(--el-text-color-placeholder);
        }
      }
    }
  }
}

.sidebar {
  .task-statistics,
  .learning-tips {
    background: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
    margin-bottom: 20px;
    
    h3 {
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 16px;
      color: var(--el-text-color-primary);
    }
  }
}

.stats-list {
  .stat-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--el-border-color-extra-light);
    
    &:last-child {
      border-bottom: none;
    }
    
    .stat-label {
      font-size: 14px;
      color: var(--el-text-color-secondary);
    }
    
    .stat-value {
      font-weight: 500;
      color: var(--el-text-color-primary);
    }
  }
}

.tips-list {
  .tip-item {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
    
    &:last-child {
      margin-bottom: 0;
    }
    
    .tip-icon {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: var(--el-color-warning-light-9);
      color: var(--el-color-warning);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    
    .tip-content {
      .tip-title {
        font-weight: 500;
        margin-bottom: 4px;
        color: var(--el-text-color-primary);
      }
      
      .tip-desc {
        font-size: 14px;
        color: var(--el-text-color-secondary);
        line-height: 1.5;
      }
    }
  }
}

@media (max-width: 768px) {
  .task-main-info {
    grid-template-columns: 1fr;
  }
  
  .content-container {
    grid-template-columns: 1fr;
  }
  
  .record-header {
    flex-direction: column !important;
    gap: 4px;
    align-items: flex-start !important;
  }
  
  .related-task-item {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px;
    
    .task-actions {
      width: 100%;
      text-align: right;
    }
  }
}
</style>
